import React from "react";
import { Form, Modal, Row, Col, Button, Checkbox, Spin } from "antd";
import { openNotificationWithIcon } from "utils/comm";
import qianshou from "../../assets/images/qianshou.png";
import styles from "./TransferForm.less";
import FlowHandleBaseForm from "./FlowHandleBaseForm";

const formItemLayout = {
  labelCol: { span: 24 },
  wrapperCol: { span: 24 },
};

@Form.create()
class SignForm extends FlowHandleBaseForm {
  constructor(props) {
    super(props);
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
    this.state = {
      disabled: false,
      noticeUsers: [],
    };
  }

  componentDidMount() {
    /*
    const { dispatch, form } = this.props;
    dispatch({
      type: "FlowChart/getTemplateListByType",
      payload: {
        type: "TASK_CLAIM",
      },
    }).then(({ errCode, datas }) => {
      if (errCode === 0 && datas.length > 0) {
        // console.log(datas[0]);
        form.setFieldsValue({
          title: datas[0].title,
          content: datas[0].content,
        });
        this.setState({ disabled: true });
      } else {
        this.setState({ disabled: false });
      }
    });
    */
    this.noticeKey = '签收';
    this.loadMessageTheme();
  }

  handleOk = () => {
    const {
      form,
      onCancel,
      dispatch,
      taskId,
      getList,
      applyUserId,
    } = this.props;
    const { noticeUsers } = this.state;

    const USER_CODE = sessionStorage.getItem("USER_CODE");
    form.validateFields((err, values) => {
      if (err) {
        // 通知消息主题没有配置可以提交
        if (Object.keys(err).length > 1 || !err.messageThemName) {
          return;
        }
      }

      const { user, title, content } = values;

      const receiveMessagers = [];
      if (user.includes("publisher")) {
        receiveMessagers.push(applyUserId);
      }
      if (user.includes("signer")) {
        receiveMessagers.push(USER_CODE);
      }

      receiveMessagers.push(...(noticeUsers || []).map(({ userCode: _code }) => _code));

      dispatch({
        type: "FlowHandle/handleTaskclaim",
        payload: {
          taskId,
          title,
          content,
          userCode: USER_CODE,
          receiveMessagers,
        },
      }).then(({ errCode, errMsg }) => {
        if (errCode === 0) {
          this.openNotificationWithIcon("success", "", "签收成功");
          onCancel("signVisible", false);
          if (getList instanceof Function) {
            getList();
          }
        } else {
          this.openNotificationWithIcon("error", "", errMsg);
        }
      });
    });
  };

  render() {
    const { form, onCancel, visible, confirmLoading } = this.props;
    const { disabled } = this.state;
    const options = [
      { label: "发起人", value: "publisher" },
      { label: "签收人", value: "signer" },
    ];

    const { getFieldDecorator } = form;
    
    const customUsers = this.getCustomNoticeUsers();

    return (
      <Modal
        title="签收"
        visible={visible}
        onOk={this.handleOk}
        onCancel={() => onCancel("signVisible", false)}
        width="600px"
        centered
        destroyOnClose
        className={styles.root}
        hideRequiredMark
        labelAlign="left"
        confirmLoading={confirmLoading}
        footer={[
          <Button key="back" onClick={() => onCancel("signVisible", false)}>
            取消
          </Button>,
          <Button
            key="ok"
            type="primary"
            onClick={this.handleOk}
            loading={confirmLoading}
          >
            确认签收
          </Button>,
        ]}
      >
        <Spin spinning={confirmLoading}>
          <Row>
            <Col span={12} style={{ display: "flex", alignItems: "center" }}>
              <img src={qianshou} alt="" />
            </Col>
            <Col span={12}>
              <Form {...formItemLayout}>
                {/*
                <div>
                  <div className={styles.formLabel}>消息标题：</div>
                  <Form.Item label="">
                    {getFieldDecorator("title", {
                      rules: [
                        { max: 100, message: "请不要超过100个字符" },
                        { required: true, message: "请输入消息标题" },
                      ],
                    })(<Input placeholder="请输入" disabled={disabled} />)}
                  </Form.Item>
                </div>
                <div>
                  <div className={styles.formLabel}>消息内容：</div>
                  <Form.Item label="">
                    {getFieldDecorator("content", {
                      rules: [
                        { max: 100, message: "请不要超过100个字符" },
                        { required: true, message: "请输入消息内容" },
                      ],
                    })(
                      <TextArea
                        placeholder="请输入消息内容"
                        rows={5}
                        disabled={disabled}
                      />,
                    )}
                  </Form.Item>
                </div>
                */}
                { this.renderNoticeTheme() }
                <div className={styles.last}>
                  <span>消息接收人：</span>
                  <Form.Item label="" {...formItemLayout}>
                    {this.renderNoticeUsers(
                      null, 
                      customUsers, 
                      getFieldDecorator("user", {
                        initialValue: ["publisher"] || null,
                        rules: [],
                      })(
                        <Checkbox.Group
                          options={options}
                          // defaultValue={["publisher"]}
                        />,
                      ),
                      disabled,
                    )}
                  </Form.Item>
                </div>
              </Form>
            </Col>
          </Row>
        </Spin>
      </Modal>
    );
  }
}

export default SignForm;
